<template>
	<view class="" style="background: #868b90;">
		<view class="_paddingTop" style="text-align: center; font-weight: bold;color: #fff;line-height: 60rpx;">
			<view class="" style="    font-size: 50rpx;">
				一键申请多平台
			</view>
			<view class="">
				选择优惠方案，轻松解决资金问题
			</view>
		</view>
		<view class="quickValuation">
			<view class="contentBox">
				<u-cell-group>
					<u-cell-item center :value="assessInfo.carModel" :value-style="{'color':'#666'}" @click="clickCar"
						:arrow="true" title="车型">
					</u-cell-item>
					<u-cell-item center :value="assessInfo.addresss" :value-style="{'color':'#666'}"
						@click="cityShow = true" :arrow="true" title="所在城市"></u-cell-item>
					<u-cell-item center value="" :arrow="false" title="姓名">
						<u-input slot="right-icon" v-model="assessInfo.mileage" input-align="right" type="number"
							placeholder="请输入姓名" />
					</u-cell-item>
					<u-cell-item center value="" :arrow="false" title="身份证号">
						<u-input slot="right-icon" v-model="assessInfo.mileage" input-align="right" type="number"
							placeholder="请输入身份证号" />
					</u-cell-item>
					<u-cell-item center value="" :arrow="false" title="联系方式">
						<u-input slot="right-icon" v-model="assessInfo.mileage" input-align="right" type="number"
							placeholder="请输入手机号码" />
					</u-cell-item>
					<u-cell-item center value="" :arrow="false" title="验证码">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" placeholder="请输入验证码" v-model="assessInfo.code"
								input-align="right" type="text"></u-input>
							<u-button style="margin-left: 10rpx;" type="success" size="mini" v-if="codeShow"
								@click="getCode">发送验证码</u-button>
							<u-button style="margin-left: 10rpx;" type="success" size="mini" v-else>{{codeTips}}S
							</u-button>
						</view>
					</u-cell-item>
					<u-cell-item center value="" :arrow="false" title="选择货款平台">
					</u-cell-item>
					<view class="_flex align-items_center _wrap">
						<view class="" @click="imgChecked(item)" v-for="(item,index) in imgData" :key="index" style="width: 33%; text-align: center;position: relative;">
							<view class="checkedBox" v-show="item.checked==true">
								<u-icon name="checkbox-mark" size="30" color="#fff"></u-icon>
							</view>
							<image :src="item.img" mode="" style="width: 100%;height: 120rpx;" mode="widthFix"></image>
						</view>
					</view>
					<view class=""  style="padding: 32rpx;">
						<u-checkbox-group>
							<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle">
								<text class="tip">使用本服务意味着您已经阅读并同意</text>
								<text class="tip" style="color: #002B56;">《用户协议》</text>
							</u-checkbox>
						</u-checkbox-group>
						
					</view>
				</u-cell-group>
			</view>
			<view class="" style="text-align: center; font-weight: bold;color: #fff;">
				-贷款流程-
			</view>
			<view class="_paddingTop">
				<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/process.png" style="width: 100%;height: 200rpx;" mode="widthFix"></image>
			</view>
			<view class="" style="text-align: center; font-weight: bold;color: #fff;">
				-成交记录-
			</view>
			<view class="successRecord">
				<view class="_flex _justify_between align-items_center" v-for="(item,index) in successList" :key="index">
					<view class="">
						{{item.city}}
					</view>
					<view class="">
						{{item.phone}}
					</view>
					<view class="">
						成功贷款{{item.price}}万
					</view>
				</view>
			</view>
			<view class="page" style="padding-bottom: 40rpx;">
				<u-button type="primary" class="quickValuationButton" @click="quickValuationStart">提交申请</u-button>
			</view>
		</view>
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	import citySelect from "../../components/citySelect/u-city-select.vue"
	import app from "../../App.vue"
	export default {
		components: {
			citySelect,
		},
		data() {
			return {
				assessInfo: {
					carModel: '请选择车型',
					addresss: '请选择地区',
					date: '请选择首次上牌日期',
					mileage: '', //行驶里程
					fullBatteryLife: '', //满电续航
					transferTimes: '', //过户次数
				},
				cityShow: false,
				imgData:[
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_01.png",
						checked:false
					},
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_02.png",
						checked:false
					},
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_03.png",
						checked:false
					},
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_04.png",
						checked:false
					},
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_05.png",
						checked:false
					},
					{
						img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/dk/dk_logo_06.png",
						checked:false
					},
				],
				successList:[{
					city:"天津",
					phone:"130****4564",
					price:"8.5"
				},{
					city:"沈阳",
					phone:"138****4564",
					price:"6.5"
				},{
					city:"南京",
					phone:"136****4564",
					price:"7.5"
				},{
					city:"广州",
					phone:"131****4564",
					price:"18.5"
				}],
				codeShow: true,
				codeTips: 30,
				form: {
					checked:true
				},
			};
		},
		onShow() {
			console.log(app.globalData.carTypeName)
			if (app.globalData.carTypeName) {
					this.assessInfo.carModel = app.globalData.carTypeName
			} else {
				this.assessInfo.carModel = '请选择车型'
			}
		},
		methods: {
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../selectCar/selectCar"
				})
			},
			// 获取验证码
			getCode() {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				this.codeShow = false
				this.codeTips = setInterval(() => {
					this.codeTips--
					if (this.codeTips === 0) {
						this.codeShow = true
						clearInterval(this.codeTips)
					}
				}, 1000)
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			},
			// 城市选择
			cityChange(e) {
				if (e.province.label == "天津市" || e.province.label == "北京市" || e.province.label == "上海市" || e.province
					.label == "重庆市" || e.province.label == "香港" || e.province.label == "澳门") {
					this.assessInfo.addresss = e.province.label;
				} else {
					this.assessInfo.addresss = e.city.label;
				}
			
			},
			// 多选贷款平台
			imgChecked(e){
				let check=e.checked
				console.log(check)
					e.checked=!check
			},
			quickValuationStart() {
				uni.showToast({
					title: "提交成功，客服24小时内联系",
					icon: "none"
				})
			}
		}
	};
</script>
<style scoped>
	.introduc {
		color: #888888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	/* 选择货款平台 */
	.checkedBox{
		       position: absolute;
		       bottom: 0px;
		       right: 0px;
			   padding: 0 10rpx;
		       background: #F86606;
	}
	/* 成交记录 */
	.successRecord{
		    color: #fff;
		    padding: 32rpx;
		    line-height: 60rpx;
		   background: #838592;
		    margin: 32rpx;
		    border-radius: 25rpx;
	}
	.tip{
		font-size: 24rpx;
	}
</style>
